import {useEffect, useState} from "react";
import {Input, message, Modal, Pagination, Button} from 'antd'
import {ExclamationCircleOutlined} from '@ant-design/icons'
import {cyDateGap} from "@/common/request";
import OperUnit from '@/components/operunit'
import config from '@/config/config'
import bfLike from '@/assets/images/beforeLike.svg'
import atLike from '@/assets/images/afterLike.svg'
import ReactMarkdown from 'react-markdown'
import rehypeRaw from 'rehype-raw'
import Area from "@/components/area/area";
import ArticleReply from "@/pages/detail/component/ArticleReply";
import ReRplayUnit from "@/pages/detail/component/ReRplayUnit";
import './detailcard.scss'

const api = config.api
const baseURL = api.baseURL
const post = api.post
const categoryList = config.head.navi
const postURL = [api.baseURL, api.post.base].join('')

const wls = window.localStorage

// 评论的回复列表
function ReRplayList(props: any) {

  // 获取回复列表
  const [reReplyList, setReReplyList] = useState([]) // 回复列表
  const [reReplyTotal, setReReplyTotal] = useState(0)  // 回复总数
  const [minListMode, setMinListMode] = useState(true)

  function getReReplayList(page: number, limit: number) {
    /*cyGet('回复列表',
      cyUrl([baseURL, post.base, post.viewReplies]),
      {
        id: props.item.post.id,
        page: page ? page : 1,
        limit: limit ? limit : 3
      }
    ).then(data => {
      setReReplyList(data.replyList)
      setReReplyTotal(data.pagination.total)
    })*/
  }

  // 删除回复
  function showConfirm(id: any) {
    Modal.confirm({
      title: '确认删除回复？',
      icon: <ExclamationCircleOutlined/>,
      content: '回复将会被删除，该操作不可逆！',
      onOk() {
        deleteReReply(id)
      }
    })
  }

  function deleteReReply(id: any) {
    /* cyPost('删除回复',
       cyUrl([baseURL, post.base, post.deletePost]),
       {
         token: wls.XB_token,
         id: id
       }
     ).then(() => {
       message.success({
         content: '删除成功！',
         duration: 0.3,
         onClose: () => {
           getReReplayList()
         }
       })
     }).catch(err => {
       message.error(err)
     })*/
  }

  // 显示/关闭回复框
  const [reReplyInput, setReReplyInput] = useState(false)

  // 显示全部回复弹窗
  const [reReplayModalView, setReReplayModalView] = useState(false)

  function showAllReRplay() {
    console.log('[显示全部回复]');
    setReReplayModalView(true)
  }

  function closeAllReRplay() {
    setReReplayModalView(false)
  }

  function handleMoreClick() {
    if (minListMode) {
      getReReplayList(1, reReplyTotal)
      setMinListMode(false)
      return;
    }
    setReReplyList(reReplyList.slice(0, 3))
    setMinListMode(true)
  }

  useEffect(() => {
    getReReplayList(1, 10)
  }, [])

  return (
    <div className='reply-box'>
      <div className='reply-box_side'>
        <div
          className='reply-box_avatar'
          style={{
            backgroundImage: `url(${props.item.avatar})`
          }}
        />
      </div>

      <div className='reply-box_main'>
        <div className='reply-box_replyer'>
          <div className='reply-box_replyer-info'>
            <span className='info-nickname'>{props.item.nickname}</span>
            <span className='info-level'>Lv.{props.item.level}</span>
            {
              props.item.userId === parseInt(wls.XB_id) ?
                <span className='delete-comment' onClick={props.showConfirm}>删除评论</span> : ''
            }
          </div>

          <div className='reply-box_replyer-floor'>
            {1 + props.index + (props.page - 1) * props.limit} 楼
          </div>
        </div>

        <div className='reply-box_content'>
          <ReactMarkdown className='content' rehypePlugins={[rehypeRaw]}>{props.item.post.content}</ReactMarkdown>
        </div>

        <div className='reply-box_oper'>
          <span className='left'>{cyDateGap(props.item.post.createdAt)}</span>
          <span className='right'>
            <span
              className='reply-for-reply'
              onClick={() => {
                setReReplyInput(!reReplyInput)
              }}>回复 {reReplyTotal}</span>
            <span className='slash'>|</span>
            <OperUnit
              className='viewer-oper'
              active={props.item.like}
              iconSrc={[bfLike, atLike]}
              value={props.item.post.likeCount}
              articleId={props.item.post.id}
              api={[postURL, api.post.like].join('')}
              method='post'
              note='评论点赞'
              iconStyle={{
                width: '20px',
                height: '20px',
                marginRight: '5px'
              }}/>
          </span>
        </div>

        {/* 显示评论的回复框 */}
        {(reReplyTotal || reReplyInput) ?
          <Area className='reply-box_nested-reply'>{reReplyInput ?
            <ArticleReply
              className='nested-reply_reply-action'
              id={props.item.post.id}
              autoFocus={true}
              onSuccess={() => {
                setReReplyInput(false)
                getReReplayList(1, 10)
              }}/> : ''}
            <div className='nested-reply_reply-list'>
              {reReplyList.map((item: any, index) => {
                return (
                  <ReRplayUnit
                    item={item}
                    lkey={index}
                    delete={() => {
                      showConfirm(item.post.id)
                    }}/>
                )
              })}
            </div>
            {reReplyTotal > 3 ?
              <div className='nested-reply_watch-more' onClick={handleMoreClick}>
                {minListMode ? `查看全部 ${reReplyTotal} 条回复` : '收起'}
              </div> : ''
            }
            <Modal
              title="查看回复"
              visible={reReplayModalView}
              maskClosable={false}
              onOk={showAllReRplay}
              onCancel={closeAllReRplay}
              footer={null}
              width={750}
              centered={true}
              getContainer={false}/>
          </Area> : ''}
      </div>
    </div>
  )
}

export default ReRplayList
